
@import "base";
@import "compass/css3";


// Brand new shiny Drupal messages, it supports an additional style besides
// status, warning, error: info
// you call it like this: drupal_set_message('FYI you have just earned 10 points', 'info');
// These messages also have a 'x' close link. This link uses some javascript that
// is embedded in the html, only when there are messages to display.

.message {
  position: relative;
  padding: 9px;
  width:100%;
  @include box-sizing(border-box);
  margin-bottom: 9px;
  background-color:#ccc;
  clear:both;
  @include background-image(linear-gradient(#f3f3f3, #ccc));
  @include magic-border(0.5);
  color:#222;
  border:1px solid #666;
  @include border-radius(3px);
  a {
    color:#f3f3f3;
    text-decoration:underline;
    &:hover, &:focus {
      text-decoration:none;
    }
  }
  p {
    margin-bottom: 0;
    margin-top:0;
  }
  &.warning {
    background-color:#c28b37;
    @include background-image(linear-gradient(#eaad57, #c28b37));
    color:#f3f3f3;
  }
  // error appears as red
  &.error {
    background-color:#ba3832;
    @include background-image(linear-gradient(#e15552, #ba3832));
    color:#f3f3f3;
  }
  // status appears as green
  &.status {
    background-color:#438f45;
    @include background-image(linear-gradient(#46ac48, #438f45));
    color:#f3f3f3;
  }
  // Info appears as a neutral blue
  &.info {
    background-color:#3482ba;
    @include background-image(linear-gradient(#5ba5de, #3482ba));
    color:#f3f3f3;
  }
  .krumo-root,
  pre  {
    color:#444;
  }
  .close {
    cursor:pointer;
    font-family:arial,verdana,sans;
    position:absolute;
    top:0;
    right:3px;
    padding:5px;
    font-size: 11px;
    font-weight:bold;
    color:#222;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }
}
